<template>
  <div style="cursor: pointer">
    <img v-if="imgSrc" :src="imgSrc" @click="onClick" :width="thisWidth" :height="height" />
    <span v-else v-bind:style="{ width: thisWidth + 'px', height: height + 'px', display: 'inline-block' }"></span>
  </div>
</template>

<script>
export default {
  props: {
    dataKey: {
      type: String,
      require: true
    },
    width: {
      type: Number,
      require: true
    },
    height: {
      type: Number,
      require: true
    },
    // 本行的所有数据，此字段不需要额外配置
    scope: {
      default: null
    }
  },
  computed: {
    imgSrc () {
      return this.dataKey ? this.scope.row[this.dataKey] : ''
    }
  },
  data () {
    return {
      thisWidth: 500
    }
  },
  mounted () {
    this.thisWidth = this.width || 500
  },
  methods: {
    onClick () {
      this.$emit('image-click', this.src)
    }
  }
}
</script>
